<template>
	<view class="page2">
		<uv-sticky>
			<view class="top" v-if="list?.length">
				<view class="left">
					<text>共</text>
					<text class="orange">{{list.filter((v)=>v.istrue).length}}</text>
					<text>件商品</text>
				</view>
				<view class="right" :class="{'orange':!isEdit}" @click="isEdit = !isEdit">
					{{isEdit? '完成':'管理'}}
				</view>
			</view>
		</uv-sticky>

		<view class="content" v-if="list?.length">
			<view class="list" style="margin-bottom: 0.5rem;position: relative;">
				<view class="between">
					<view class="left">
						满9.9享超值换购
					</view>
					<view class="right" style="display: flex;">
						去凑单
						<uv-icon name="arrow-right" size="13"></uv-icon>
					</view>
				</view>
				<uv-scroll-list :indicator=false @right="right" @left="left">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in list" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
							<image class="scroll-list__goods-item__image" :src="item.image"></image>
							<view class="price-num">
								<view class="price">
									￥157.00
								</view>
								<view class="discount">
									￥88.00
								</view>
							</view>
							<view style="display: flex;justify-content: flex-end;">
								<uv-icon name="plus-circle-fill" color="#01cf23" size="14"></uv-icon>
							</view>
						</view>
						<view class="scroll-list__show-more">
							<text class="scroll-list__show-more__text">滑动查看全部</text>
						</view>
					</view>
				</uv-scroll-list>
			</view>
			<uv-swipe-action>
				<uv-swipe-action-item v-for="(item,index) in list" :key="index" :options="options">
					<view class="swipe-action uv-border-top uv-border-bottom">
						<view class="swipe-action__content">
							<view class="list">
								<view class="check">
									<radio color="#d33124" :value="item.istrue" :checked="item.istrue"
										@click="item.istrue = !item.istrue" />
								</view>
								<view class="goods">
									<view class="thumb">
										<image :src="item.image" mode=""></image>
									</view>
									<view class="item">
										<view class="title">
											<text class="two-omit">{{item.title}}</text>
										</view>
										<view class="price-num">
											<view class="price">
												<text class="min">￥</text>
												<text class="max">{{item.money}}</text>
											</view>
											<view class="num">
												<view class="add" @click="item.goods_num > 1 ? --item.goods_num : ''"
													:style="item.goods_num > 1 ?'':'background:#f8f8f8'">
													-
												</view>
												<input type="number" v-model="item.goods_num" />
												<view class="add" @click="++item.goods_num" style="border: none;">
													+
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uv-swipe-action-item>
			</uv-swipe-action>
			<view class="close-account" v-if="list?.length">
				<view class="check-total">
					<view class="check" @click="toallcheck()">
						<radio color="#d33124" :value="allcheck" :checked="allcheck" />
						<text class="all">全选</text>
					</view>
				</view>
				<view class="account">
					<view class="total" v-if="!isEdit">
						<text>合计：</text>
						<text class="price">￥{{total}}</text>
					</view>
					<view class="btn-calculate" @click="onConfirm" v-if="!isEdit">
						<text>去结算({{list.filter((v)=>v.istrue).length}})</text>
					</view>
					<view class="btn-del" v-else>
						<text class="del" @click="todelete">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="clear" v-else>
			<uv-empty mode="car" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
			<view class="btn-calculate" @click="toskip">
				<text>去逛逛</text>
			</view>
		</view>
		<view class="shop">
			<view class="guess">
				———— 猜你喜欢 ————
			</view>
			<view class="goodslist">
				<view class="list" v-for="val in 6" :key="val" @click="tiaozhuan()">
					<image src="https://gd-hbimg.huaban.com/e86b6d1cb6be2b1a8430a82c63208bba2aa6cdafc39e2-hVFO5r_fw658webp"
						mode="aspectFill"></image>
					<view class="container">
						<view class="one-omit">
							测试商品
						</view>
						<view class="price-num">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">157</text>
								<text class="min">.00</text>
							</view>
							<view class="discount">
								￥88.00
							</view>
						</view>
						<view class="action">
							<view class="discount">
								已售4件
							</view>
							<view class="btn-calculate">
								<text>购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-loading-page :loading="load" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
	</view>
</template>

<script setup>
	import {
		computed,
		defineComponent,
		reactive,
		ref,
		watch
	} from 'vue';
	const isEdit = ref(false)
	const load = ref(false)
	const allcheck = ref(false)
	const options = reactive([{
			text: '找相似',
			style: {
				backgroundColor: '#ffbf00'
			}
		},
		{
			text: '删除',
			style: {
				backgroundColor: '#f56c6c'
			}
		}
	])

	const list = reactive([{
			istrue: false,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}, {
			istrue: true,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		},
		{
			istrue: false,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}, {
			istrue: true,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		},
		{
			istrue: false,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}, {
			istrue: true,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		},
		{
			istrue: false,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}, {
			istrue: true,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		},
		{
			istrue: false,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}, {
			istrue: true,
			image: 'https://gd-hbimg.huaban.com/02f6ce642d1de442ea9a3de99b369dd7725257666997a-GhiAXg_fw658webp',
			title: '薇妮(Viney)时尚包包女包牛皮单肩包女休闲百搭斜挎包韩版小方包潮(水电费枪色)',
			size: '金色,大尺码',
			money: 89.00,
			goods_num: 1
		}
	])

	const total = computed(() =>
		list.filter((v) => v.istrue).reduce((pre, cur) => {
			return pre + cur.money * cur.goods_num
		}, 0))
	const todelete = () => {
		let newlist = list.filter((v) => !v.istrue)
		list.splice(0)
		list.push(...newlist)
		uni.hideTabBarRedDot({
			index: 2
		})
	}
	const onConfirm = () => {
		load.value = true
		setTimeout(function() {
			load.value = false
			uni.setStorageSync('shopList', JSON.stringify(list.filter((v) => v.istrue)))
			uni.navigateTo({
				url: '/pages/ConfirmOrder/ConfirmOrder'
			})
		}, 2000);
	}

	const toallcheck = () => {
		allcheck.value = !allcheck.value
		list.forEach((v) => {
			v.istrue = allcheck.value
		})
	}
	watch(list, () => {
		if (!list.filter((v) => !v.istrue)?.length) {
			allcheck.value = true
		} else {
			allcheck.value = false
		}
	}, {
		deep: true
	})
	const toskip = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	const tiaozhuan = () => {
		uni.navigateTo({
			url: '/pages/goodsDetails/goodsDetails'
		})
	}
</script>

<style lang="scss" scoped>
	@import "cart.scss";
</style>